<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-19 21:22:12
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-04-23 15:24:33
 * @FilePath: \work\pages\index\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="index">
    <uv-status-bar></uv-status-bar>
    <z-navbar @qrCode="qrCode"></z-navbar>
    <view class="content">
      <view class="content-left">
        <view
          class="content-left-item"
          :class="{ active: item.id === tabActive }"
          v-for="item in tabs.arr.filter(r => r.show)"
          :key="item.id"
          @click="handleTabClick(item)"
        >
          {{ item.label }}
        </view>
      </view>
      <view class="content-right">
        <template v-if="tabActive === 1"> <tables @onChange="tablesOnChange" /></template>
        <template v-else-if="tabActive === 2">
          <detail v-model:data="tabs.arr[1].val"></detail>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref, computed, reactive } from 'vue';
  import tables from './components/table.vue';
  import detail from './components/detail.vue';
  let tabs = reactive({
    arr: [
      { label: '订单', id: 1, show: true },
      { label: '详情', id: 2, show: false, val: {} }
    ]
  });
  let tabActive = ref(1);
  let mt = computed(() => {
    let style = {};
    style.paddingTop = uni.$uv.addUnit(uni.$uv.sys().statusBarHeight + 44, 'px');
    return style;
  });
  const handleTabClick = val => {
    tabActive.value = val.id;
    tabs.arr[1].show = false;
  };
  const tablesOnChange = val => {
    tabActive.value = 2;
    tabs.arr[1].val = val;
    tabs.arr[1].show = true;
  };
  const qrCode = val => {
    tabActive.value = 2;
    tabs.arr[1].val = { ...val, id: val.order_id || val.id };
    tabs.arr[1].show = true;
  };
</script>

<style lang="scss">
  .index {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  .content {
    color: #000;
    box-sizing: border-box;
    flex: 1;
    display: flex;
    background-color: #f5f6f8;
    &-left {
      height: 100%;
      width: 10vw;
      flex-shrink: 0;
      color: #000;
      font-size: 2vw;
      display: flex;
      background-color: #fff;
      flex-direction: column;
      &-item {
        height: 100rpx;
        line-height: 100rpx;
        width: 100%;
        text-align: center;
      }
      .active {
        background-color: #dfe8ff;
        color: #6990ed;
        transition: all 0.3s;
        font-weight: bold;
      }
    }
    &-right {
      flex: 1;
      margin: 17rpx;
      border-radius: 4px;
      background-color: #fff;
      overflow: hidden;
    }
  }
</style>
